<template>
	<view class="bosss">
		<image class="headerimgs" src="../../imgs/header.png" mode=""></image>
		<view class="readinfobos">
			<!-- <view class="readpnuboxs">
				<input v-model="userphone" class="phinput" type="number" maxlength="11" placeholder="请输入手机号码" />
			</view> -->
			<image @click="nowbuy" class="lqimgs" src="../../imgs/ligoumai.png" mode="widthFix"></image>
		</view>
		<image class="bianboxs" src="../../imgs/bianbian.png" mode="widthFix"></image>

		<!-- <view class="ceshisty" @click="gourl">
			测试按钮
		</view> -->
		<image class="detailimgs" src="../../imgs/detail.png" mode="widthFix"></image>
		<view v-if="showpopbox" class="bigpopboxs">
			<view class="mask"></view>
			<view class="tanboxs">
				<image @click="closepop" class="closings" src="../../imgs/clospo.png" mode="widthFix"></image>
				<image class="popguisty" src="../../imgs/popboxs.png" mode="widthFix"></image>
			</view>
		</view>


	</view>
</template>


<script>
	//import xiaoVideoComponent from '../../utils/components/x-video/x-video.vue';
	// import request from '../../utils/request.js';
	// import api from '../../utils/url.js';
	// import MiguSdk from '../../utils/common.js';
	// import Base64 from '../../utils/base64.js';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				showpopbox: false,
				userphone: "",

				clickid: "",
				app: "",
				serial: "",

			}
		},
		components: {

		},
		computed: {
			...mapState({

			})
		},
		onLoad(res) {
			var that = this
			console.log('onLoad', res)
			try {
				this.clickid = res.__CLICKID__
				this.app = res.__APP__
				this.serial = res.__SERIAL__
			} catch (e) {

			}

		},
		onShow() {
			console.log('onShow')
		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			// console.log("滚动距离为：" + e.scrollTop);
		},
		onReachBottom() {
			// console.log('触底');

		},
		methods: {
			gourl() {
				window.location.href =
					"weixin://dl/business/?appid=wx1779d86bb2eb6f98&path=pages/main/index/index&query=&env_version="
				// window.location.href =
				// 	"weixin://dl/business/?appid=wx955847840c5f1f91&path=pages/index/index&query=&env_version="
			},
			urlParamsToObject(url) {
				const queryString = url.split('?')[1];
				const paramsArr = queryString.split('&');
				const paramObj = {};

				paramsArr.forEach(param => {
					const [key, value] = param.split('=');
					paramObj[key] = decodeURIComponent(value);
				});

				return paramObj;
			},
			closepop() {
				this.showpopbox = false
			},

			nowbuy() {
				//console.log('4545')
				// let widurl = location.href;
				// const queryval = widurl.indexOf("?");
				// if (queryval !== -1) {
				// 	console.log('str', widurl.substring(queryval + 1))
				// } else {
				// 	console.log('url是空')
				// }
				// const paramsObject = this.urlParamsToObject(widurl);
				// return false

				//跳转到中间页
				uni.navigateTo({
					url: "/pages/juchang/juchang?__CLICKID__=" + this.clickid + "&__APP__=" + this.app +
						"&__SERIAL__=" + this.serial
				})
				return false


				let url = location.href;
				console.log('str11', url)

				uni.showLoading({
					title: "加载中...",
					// icon:"none"
				})

				const queryIndex = url.indexOf("?");
				// let jumpurl =
				// 	`weixin://dl/business/?appid=wx1779d86bb2eb6f98&path=volleyball/index/index&env_version=`
				let jumpurl =
					`weixin://dl/business/?appid=wx1779d86bb2eb6f98&path=volleyball/index/index&env_version=trial`
				//获取url中？后面的所有参数 encode后给小程序
				if (queryIndex !== -1) {
					console.log('str', url.substring(queryIndex + 1))
					jumpurl = jumpurl + "&query=" + encodeURIComponent(url.substring(queryIndex + 1))
					//return this.url.substring(queryIndex + 1);
				} else {
					console.log('url是空')
				}
				console.log('urljumpurl', jumpurl)
				//return false
				window.location.href = jumpurl
				uni.hideLoading()
				return false


				const phoneReg = /^1[3456789]\d{9}$/
				if (this.userphone.length == '0') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return false
				} else if (!phoneReg.test(this.userphone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					})
					return false
				}

				this.showpopbox = true
			}

		}
	}
</script>

<style lang="scss">
	//@import '../../utils/base.css';

	page {
		// background-color: #AC9C8E;
		// background-color: #FE0024;
	}

	.bosss {
		width: 100%;
		display: flex;
		flex-direction: column;

		.headerimgs {
			width: 100%;
			//display: block;
			//height: 376px;
			height: 1364rpx;
			//max-height: 100%; 
			// position: absolute;
		}

		.readinfobos {
			width: 100%;
			position: absolute;
			// border: 1px solid red;
			margin-top: 1204rpx;
			z-index: 100;
			// border: 1px solid black;

			.readpnuboxs {
				background-image: url('../../imgs/phonenum.png');
				/* 设置图片路径 */
				background-size: cover;
				/* 背景图片覆盖整个元素 */
				background-repeat: no-repeat;
				/* 背景图片不重复 */
				background-position: center;
				/* 背景图片居中 */
				width: 652rpx;
				/* 元素宽度 */
				height: 136rpx;
				/* 元素高度 */
				// border: 1px solid black;
				margin-left: 49rpx;

				.phinput {
					width: 572rpx;
					height: 128rpx;
					// margin-top: 27rpx;
					// border: 1px solid black;
					margin-left: 50rpx;
				}
			}

			.lqimgs {
				width: 80%;
				margin-left: 10%;
				// margin-top: 35rpx;
				margin-top: 150rpx;

			}
		}

		.bianboxs {
			width: 100%;
			margin-top: -5rpx;
		}

		.ceshisty {
			width: 100%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 32rpx;
		}


		.detailimgs {
			width: 100%;
			margin-top: -5rpx;
			//display: block;

		}

		.ercodeimgs {
			width: 100%;
			margin-top: -5rpx;
			//display: block;

		}
	}

	.bigpopboxs {
		width: 100%;

		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			background-color: #000;
			opacity: 0.7;
			z-index: 100;
		}

		.tanboxs {
			.closings {
				width: 60rpx;
				height: 60rpx;
				position: fixed;
				right: 20rpx;
				bottom: 820rpx;
				z-index: 110;
			}

			.popguisty {
				width: 100%;
				height: 400rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 105;
			}
		}
	}
</style>